<template>
  <div>
    <div class="top">
      <div class="fl top-left">题库列表</div>
      <!-- <el-input size="mini" class="fr top-right" suffix-icon="el-icon-search" placeholder="请输入您要搜索的题目" /> -->
    </div>
    <div class="body">

      <el-button type="primary" size="mini" style="margin-top:10px;margin-bottom:10px" @click="back()">返回</el-button>
      <!-- <el-button type="primary" size="mini" style="margin-top:10px;margin-bottom:10px" @click="add()">重建试卷</el-button> -->
      <el-table
        :header-cell-style="{
          'background-color': '#FAFAFA',
          'height': '54px',
          'color': '#000000',
          'font-size': '14px',
          'font-weight': 'bold'
      }"
        :data="tableData"
        size="mini"
        empty-text="暂无数据"
        stripe
        style="width: 100%">
        <el-table-column
          label="题号"
          align="center"
          width="90">
            <template slot-scope="scope">
              {{scope.$index + 1 + (tiaojian.page - 1)*tiaojian.size}}
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          width="100">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.questionListVo.typeName=='单选题'" type="danger">{{scope.row.questionListVo.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.questionListVo.typeName=='多选题'" type="success">{{scope.row.questionListVo.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.questionListVo.typeName=='案例题'">{{scope.row.questionListVo.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else type="warning">{{scope.row.questionListVo.typeName||'-'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          align="center"
          width="90">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.questionListVo.levelName=='简单'" type="danger">{{scope.row.questionListVo.levelName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.questionListVo.levelName=='中等'" type="success">{{scope.row.questionListVo.levelName||'-'}}</el-tag>
              <el-tag size="mini" v-else type="warning">{{scope.row.questionListVo.levelName||'-'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="题目">
            <template slot-scope="scope">
              <span :title="scope.row.questionListVo.titleDescription" class="shenglue">{{scope.row.questionListVo.titleDescription}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160">
            <template slot-scope="scope">
              <el-button type="text" @click="xiugai(scope.row);index=scope.$index" title="查看详情">详情</el-button>
              <!-- <el-button type="text" @click="openChongxuan(scope.row);index_chongxuan=scope.$index">重选</el-button>
              <el-button type="text" @click="chongchou(scope.row)">重抽</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="width:100%;height:30px;margin-top: 24px;">
        <el-pagination
          style="float:right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :hide-on-single-page="false"
          :current-page="tiaojian.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="tiaojian.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="试题数据" :close-on-click-modal="true" width="90%" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">题型：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-select size="mini" disabled v-model="form.typeId" style="width:100%;">
              <el-option
                v-for="item in type_tixing"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">难度：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-select size="mini" filterable disabled v-model="form.levelId" style="width:100%;">
              <el-option
                v-for="item in type_nandu"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">出题人：</span>
          </el-col>
          <el-col class="mb" :span="span2">
            <el-input size="mini" disabled v-model="form.questioner" />
          </el-col>
        </el-row>

        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">级别：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <el-cascader
              filterable
              disabled
              style="width:100%"
              size="mini"
              v-model="dialog_tiaojians"
              :options="type_all"
              :props="{ checkStrictly: true, expandTrigger: 'hover' }"
              clearable>
            </el-cascader>
          </el-col>
        </el-row>

        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">题目：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <el-input size="mini" type="textarea" disabled v-model="form.titleDescription" />
          </el-col>
        </el-row>
        <el-row v-show="form.typeId==1||form.typeId==2" v-for="(item, index) in xuanze" :key="index">
          <el-col class="mb" :span="span1">
            <span class="mt"><i v-if="item.value" class="el-icon-circle-check icon-blue"></i>选项{{zimu[index]}}：</span>
          </el-col>
          <el-col class="mt" :span="24-span1">
            <div :title="item.title" class="">{{item.title}}</div>
            <!-- <div class="fr">
              <el-button v-if="form.typeId==1" type="primary" :disabled="item.value" size="mini" @click="shezhi(index)">设为正确</el-button>
              <el-button v-if="form.typeId==2&&item.value" type="info" size="mini" @click="shezhi(index)">设为错误</el-button>
              <el-button v-if="form.typeId==2&&!item.value" type="primary" size="mini" @click="item.value=!item.value">设为正确</el-button>
              <el-button title="添加一个选项" type="primary" size="mini" icon="el-icon-circle-plus-outline" circle @click="addSelect(index)"></el-button>
              <el-button title="删除一个选项,选项数量最少为四项" type="danger" :disabled="xuanze.length<5" size="mini" icon="el-icon-delete" circle @click="deleteSelect(index)"></el-button>
            </div> -->
          </el-col>
        </el-row>
        <el-row v-if="form.typeId==3">
          <el-col class="mb" :span="span1">
            <span class="mt">所需材料：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <el-input size="mini" type="textarea" disabled v-model="cailiao.text" />
          </el-col>
          <el-col class="mb" :span="span1">
            <span class="mt">图片材料：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <div class="images">
              <el-image v-for="(item, index) in cailiao.images" :key="index" class="image" :src="item" />
            </div>
          </el-col>
        </el-row>
        <el-row v-if="form.typeId==3||form.typeId==4">
          <el-col class="mb" :span="span1">
            <span class="mt">答案：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <el-input size="mini" type="textarea" disabled v-model="form.answer" />
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mb" :span="span1">
            <span class="mt">解析：</span>
          </el-col>
          <el-col class="mb" :span="24-span1">
            <el-input size="mini" type="textarea" disabled v-model="form.analyses" />
          </el-col>
        </el-row>
      </el-form>
      
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.leftClassTimes===''||form.totalClassTimes===''" type="primary" @click="submit()">确 定</el-button>
      </div> -->
    </el-dialog>
    <el-dialog title="试题数据" :close-on-click-modal="true" width="90%" :visible.sync="dialogChongxuan">
      <el-table
        :header-cell-style="{
          'background-color': '#FAFAFA',
          'height': '54px',
          'color': '#000000',
          'font-size': '14px',
          'font-weight': 'bold'
      }"
        :data="table_chongxuan"
        size="mini"
        empty-text="暂无数据"
        stripe
        style="width: 100%">
        <el-table-column
          label="出题人"
          align="center"
          width="110">
            <template slot-scope="scope">
              {{scope.row.questioner}}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="类型"
          align="center"
          width="100">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.typeName=='单选题'" type="danger">{{scope.row.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.typeName=='多选题'" type="success">{{scope.row.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.typeName=='案例题'">{{scope.row.typeName||'-'}}</el-tag>
              <el-tag size="mini" v-else type="warning">{{scope.row.typeName||'-'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          align="center"
          width="90">
            <template slot-scope="scope">
              <el-tag size="mini" v-if="scope.row.levelName=='简单'" type="danger">{{scope.row.levelName||'-'}}</el-tag>
              <el-tag size="mini" v-else-if="scope.row.levelName=='中等'" type="success">{{scope.row.levelName||'-'}}</el-tag>
              <el-tag size="mini" v-else type="warning">{{scope.row.levelName||'-'}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
          label="题目">
            <template slot-scope="scope">
              <span :title="scope.row.titleDescription" class="shenglue">{{scope.row.titleDescription}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="160">
            <template slot-scope="scope">
              <el-button type="text" @click="tihuan(scope.row)" title="查看详情并修改">替换</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width:100%;height:30px;margin-top: 24px;">
        <el-pagination
          style="float:right"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          background
          :hide-on-single-page="false"
          :current-page="chongxuan.page"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-size="chongxuan.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_chongxuan">
        </el-pagination>
      </div>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="form.leftClassTimes===''||form.totalClassTimes===''" type="primary" @click="submit()">确 定</el-button>
      </div> -->
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $http from '@/utils/request'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data () {
    return {
      index: 0,
      index_chongxuan: 0,
      dialogVisible: false,
      dialogFormVisible: false,
      dialogChongxuan: false,
      dialogImageUrl: '',
      span1: 3,
      span2: 3,
      cailiao: {
        text: '',
        images: []
      },
      forms: {
        singleChoiceAmount: '', // 单选题目数量
        singleChoiceScore: '', // 单选题目分数
        multipleChoiceAmount: '', // 多选题目数量
        multipleChoiceScore: '', // 多选题目分数
        caseQuestionAmount: '', // 案例题目数量
        caseQuestionScore: '', // 案例题目分数
        scenarioQuestionAmount: '', // 情景题目数量
        scenarioQuestionScore: '', // 情景题目分数
        creater: '', // 创建人
        departmentId: '', // 部门标识
        
        positionQuestionPercentage: '', // 专业题库占比(单选，多选)
        commonQuestionPercentage: '', // 通用题库占比(单选，多选)
        
        specialPositionPercentage: '', // 专用题库占比(案例，情景)
        specialCommonPercentage: '', // 通用题库占比(案例，情景)

        simpleQuestionPercentagePosition: '', // 专用题库-简单题占比(单选，多选)
        mediumQuestionPercentagePosition: '', // 专用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentagePosition: '', // 专用题库-困难题占比(单选，多选)
        
        simpleQuestionPercentageCommon: '', // 通用题库-简单题占比(单选，多选)
        mediumQuestionPercentageCommon: '', // 通用题库-中等难度题占比(单选，多选)
        difficultQuestionPercentageCommon: '', // 通用题库-困难题占比(单选，多选)

        simpleSpecialPositionPercentage: '', // 专用题库-简单题难度占比(案例，情景)
        mediumSpecialPositionPercentage: '', // 专用题库-中等难度占比(案例，情景)
        difficultSpecialPositionPercentage: '', // 专用题库-困难题占比(案例，情景)

        simpleSpecialCommonPercentage: '', // 通用题库-简单题占比(案例，情景)
        mediumSpecialCommonPercentage: '', // 通用题库-中等难度题占比(案例，情景)
        difficultSpecialCommonPercentage: '', // 通用题库-困难难度题占比(案例，情景)
        name: '', // 试券名
        positionId: '', // 岗位标识
        professionId: '', // 专业标识
        rankId: '', // 级别标识
        score: '' // 试券总分
      },
      tiaojians: [],
      dialog_tiaojians: [],
      imageUrls: [],
      type_tixing: [],
      type_nandu: [],
      type_all: [],
      type_jibie:  [],
      type_leibie:  [],
      type_gangwei: [],
      type_zhuanye:  [],
      tableData: [],
      table_chongxuan: [],
      total: 0,
      total_chongxuan: 0,
      repositoryType: 2, // 题库类型，专业题库是2，通用图库是1
      tiaojian: {
        page: 1,
        size: 10
      },
      chongxuan: {
        page: 1,
        size: 10,
        paperId: '',
        questionId: ''
      },
      xuanze: [], // 选择的选项
      zimu:['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], // 字母数组
      xuanzeDaan: [],// 多选的答案
      form: {
        analyses: '',
        answer: '',
        createDatetime: '',
        departmentId: '',
        id: '',
        levelId: 1, // 难度，必填
        logicallyDelete: '', // 题目状态
        options: '',
        optionsId: '', //选项表id，更新时必传
        positionId: '',
        professionId: '',
        questioner: '',
        rankId: '',
        repositoryId: 2, //仓库类型标识
        title: '', // 问题的图片，多个图片用逗号分隔开
        titleDescription: '', // 问题描述
        titleId: '', // 问题图片表id
        typeId: 1 // 问题类型，必填
      }
    }
  },
  watch: {
  },
  mounted() {
    this.getTixing()
    this.getNandu()
    this.getData()
    this.getAll()
    // this.getJibie()
    // this.getLeibie()
    this.getGangwei()
    // this.getZhuanye()
  },
  methods: {
    back() {
      this.$router.back()
    },
    shezhi(index) {
      for(let i = 0; i < this.xuanze.length; i++) {
        if (index == i) {
          this.xuanze[i].value = true
        } else {
          this.xuanze[i].value = false
        }
      }
    },
    openChongxuan(val) {
      this.dialogChongxuan = true
      this.chongxuan.questionId = val.questionListVo.id
      this.getChongxuan()
    },
    getChongxuan() {
      $http.get('/paper/get/replace/list/' + this.$route.query.id, {params: this.chongxuan}).then(response => {
        if (response.success) {
          this.table_chongxuan = response.data.list
          this.total_chongxuan = response.data.total
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    addSelect(index) {
      let num = 27
      if (this.xuanze.length < num) {
        this.xuanze.splice(index+1,0,{
          name: this.zimu[this.xuanze.length],
          value: false,
          title: ''
        })
      } else  {
        this.$message.error('选项数量不能超过'+num)
      }
    },
    deleteSelect(index) {
      this.xuanze.splice(index, 1)
    },
    getData() {
      $http.get('/paper/query/paperquestion/list/' + this.$route.query.id, {params: this.tiaojian}).then(response => {
        if (response.success) {
          this.tableData = response.data.list
          this.total = response.data.total
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    getTixing() {
       $http.get('/question/type/query/all').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.length; i++) {
            table.push({
              name: response.data[i].name,
              id: response.data[i].id,
              value: response.data[i].id,
            })
          }
          this.type_tixing = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getNandu() {
       $http.get('/question/level/query/all').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.length; i++) {
            table.push({
              name: response.data[i].name,
              id: response.data[i].id,
              value: response.data[i].id,
            })
          }
          this.type_nandu = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getAll() {
      $http.get('/examinee/grade/get/all').then(response => {
        if (response.success) {
          // let table = []
          // for(let i = 0; i < response.data.length; i++) {
          //   table.push({
          //     name: response.data[i].name,
          //     id: response.data[i].id,
          //     value: response.data[i].id,
          //   })
          // }
          this.type_all = response.data
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getJibie() {
      $http.get('/admin/examinee/rank/getlist').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.length; i++) {
            table.push({
              name: response.data[i].name,
              id: response.data[i].id,
              value: response.data[i].id,
            })
          }
          this.type_jibie = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getLeibie() {
      $http.get('/admin/examinee/department/getlist').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.length; i++) {
            table.push({
              name: response.data[i].name,
              id: response.data[i].id,
              value: response.data[i].id,
            })
          }
          this.type_leibie = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getGangwei() {
      $http.get('/admin/examiner/position/getlist').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.list.length; i++) {
            table.push({
              name: response.data.list[i].name,
              id: response.data.list[i].id,
              value: response.data.list[i].id,
            })
          }
          this.type_gangwei = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getZhuanye() {
      $http.get('/examinee/profession/getlist').then(response => {
        if (response.success) {
          let table = []
          for(let i = 0; i < response.data.list.length; i++) {
            table.push({
              name: response.data.list[i].name,
              id: response.data.list[i].id,
              value: response.data.list[i].id,
            })
          }
          this.type_zhuanye = table
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    add() {
       $http.get('/paper/rechoiceall/' + this.$route.query.id).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getData()
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    tihuan(val) {
      $http.get('/paper/rechoice/' + this.tableData[this.index_chongxuan].id + '?handReplace=true' + '&questionId=' + val.id).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.tableData[this.index_chongxuan] = val
          this.dialogChongxuan = false
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    chongchou(val) {
      $http.get('/paper/rechoice/' + val.id + '?handReplace=false' + '&questionId=' + val.questionId).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.getData()
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    xiugai(item) {
      $http.get('/question/view/question/detail/' + item.questionListVo.id).then(response => {
        if (response.success) {
          this.imageUrls = []
          for (let i in this.form) {
            this.form[i] = response.data[i]
          }
          if (response.data.typeId == 1 || response.data.typeId == 2) {
            this.form.optionsId = response.data.questionOptions.id
            this.xuanze = response.data.questionOptions&&response.data.questionOptions.options?JSON.parse(response.data.questionOptions.options):[]
            console.log('xuanze',this.xuanze)
            if (this.xuanze.length < 4) {
              this.xuanze = [{
                name: 'A',
                title: '',
                value: false
              }, {
                name: 'B',
                title: '',
                value: false
              }, {
                name: 'C',
                title: '',
                value: false
              }, {
                name: 'D',
                title: '',
                value: false
              }]
            }
          }
          if (response.data.typeId == 3) {
            this.form.titleId = response.data.questionTitle.id
            this.cailiao = response.data.questionTitle&&response.data.questionTitle.title?JSON.parse(response.data.questionTitle.title):{
              text: '',
              images: []
            }
          console.log(this.cailiao)
          }
          this.dialog_tiaojians = []
          if (response.data.rankId) {
            this.dialog_tiaojians.push(response.data.rankId)
            if (response.data.departmentId) {
              this.dialog_tiaojians.push(response.data.departmentId)
              if (response.data.positionId) {
                this.dialog_tiaojians.push(response.data.positionId)
                if (response.data.professionId) {
                  this.dialog_tiaojians.push(response.data.professionId)
                }
              }
            }
          }
          this.dialogFormVisible = true
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
        
      }).catch(error => {
        console.log(error)
      })
    },
    submit() {
      if (!this.yanzheng()) {
        return
      }
      let str = ''
      let cailiao = {
        text: this.cailiao.text,
        images: []
      }
      // 将级联数据取出来
      console.log(this.dialog_tiaojians)
      if (this.dialog_tiaojians.length > 0) {
        this.form.rankId = this.dialog_tiaojians[0]
      }
      if (this.dialog_tiaojians.length > 1) {
        this.form.departmentId = this.dialog_tiaojians[1]
      }
      if (this.dialog_tiaojians.length > 2) {
        this.form.positionId = this.dialog_tiaojians[2]
      }
      if (this.dialog_tiaojians.length > 3) {
        this.form.professionId = this.dialog_tiaojians[3]
      }
      for (let i = 0; i < this.xuanze.length; i++) {
        if(this.xuanze[i].value&&str!='') {
          str = str + ',' + this.zimu[i]
        }
        if(this.xuanze[i].value&&str=='') {
          str += this.zimu[i]
        }
      }
      for (let i = 0; i < this.imageUrls.length; i++) {
        // images = images + ',' + this.imageUrls[i].response.data
        cailiao.images.push(this.imageUrls[i].response.data)
      }
      if (this.form.typeId == 1 || this.form.typeId == 2) {
          this.form.answer = str
      } else {}
      if (this.form.typeId == 3) {
          this.form.title = JSON.stringify(cailiao)
      }
      this.form.options = this.xuanze.length?JSON.stringify(this.xuanze):''
      console.log(this.form)
      if (this.form.id) {
        $http.post('/question/modify', this.form).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.tableData[this.index].titleDescription = this.form.titleDescription
            this.tableData[this.index].positionName = this.qiehuan(this.form.positionId, this.type_gangwei, 'value', 'name')
            this.tableData[this.index].levelName = this.qiehuan(this.form.levelId, this.type_nandu, 'value', 'name')
            this.dialogFormVisible = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        $http.post('/question/add', this.form).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            // this.dialogFormVisible = false
          } else  {
            this.$message({
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        }).catch(error => {
          console.log(error)
        })
      }
      
    },
    tingyong (val,pd) {
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$message({
      //       type: 'success',
      //       message: '操作成功!'
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消操作'
      //     }) 
      //   })
      $http.post('/question/modify/status/' + val.id + '?used=' + pd,).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          val.logicallyDelete = pd
        } else  {
          this.$message({
            message: response.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    yanzheng() {
      if (this.form.typeId == '') {
        this.$message.success('请选择题型')
        return false
      }
      if (this.form.levelId == '') {
        this.$message.success('请选择难度')
        return false
      }
      if (this.form.titleDescription == '') {
        this.$message.success('请输入题目')
        return false
      }
      if(this.form.typeId == 1) {
        for (let i = 0; i < this.xuanze.length; i++) {
          if(this.xuanze[i].value) {
            break
          }
          if(i == this.xuanze.length - 1) {
            this.$message.success('请设置正确答案')
            return false
          }
        }
      }
      if(this.form.typeId == 2) {
        let j = 0
        for (let i = 0; i < this.xuanze.length; i++) {
          if(this.xuanze[i].value) {
            j++
          }
          if (j > 2) {
            break
          }
          if(i == this.xuanze.length - 1 && j < 2) {
            this.$message.success('多选题请设置最少两个正确答案')
            return false
          }
        }
      }
      return true
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(fileList)
      if (res.success) {
        this.imageUrls = fileList
      } else  {
        this.$message.error('上传失败');
      }
      console.log(this.imageUrls)
    },
    handleRemove(file, fileList) {
      this.imageUrls = fileList
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.tiaojian.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.tiaojian.page = val
      this.getData()
    },
    handleSizeChange1(val) {
      this.chongxuan.size = val
      this.getChongxuan()
    },
    handleCurrentChange1(val) {
      this.chongxuan.page = val
      this.getChongxuan()
    }
  }
}
</script>

<style lang="scss" scoped>
.head{
  width:100%;
  height: 32px;
  line-height: 32px;
  // display: flex;
  // align-items: center;
}
.top{
  width:100%;
  // height: 40px;
  padding-bottom: 20px;
  background-color: white;
}
.top-left{
  line-height:30px;
  font-size: 20px;
  color: #333333;
}
.top-right{
  width: 272px;
  line-height:30px;
}
.body{
  margin:24px 0 30px 24px;
  padding: 20px 32px 24px 32px;
  width: calc(100% - 48px);
  // height: calc(100vh - 0px);
  background-color: white;
}
.xuanze-input{
  width:calc(100% - 210px);
}
.icon-blue{
  color:#409EFF
}
.images {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.image{
  width:100px;
  height:100px;
  margin: 2px;
  border-radius: 5px;
}
</style>
